<template>
<client-only>
  <el-card class="chat-box" ref="box">
    <ul
      id="chat-message"
      class="list-unstyled py-4 scroll-content chat-message"
    >
      <template v-for="(item, index) in list">
        <li
          v-if="!item.left"
          id="user-chat-question-1"
          :key="index"
          class="d-flex message message-user right"
        >
          <div class="message-body">
            <div class="d-flex align-items-center justify-content-end">
              <div class="mx-10 p-2">
                <a href="#" class="text-dark hover-primary font-weight-bold"
                  >HOPPIN</a
                >
              </div>
              <span class="msg-avatar">
                <img
                  src="https://b0.bdstatic.com/337bc39b6880696d8c230d9e09232732.jpg@h_1280"
                  class="avatar avatar-lg rounded-circle"
                />
              </span>
            </div>
            <span class="date-time text-muted">{{formatCurrentTime()}}</span>
            <div class="message-row message-row-con">
              <div
                id="message-user-chat-question-1"
                class="message-content p-3 text-chat"
              >
                {{ item.message }}
              </div>
            </div>
          </div>
        </li>
        <li
          v-else
          id="user-chat-question-1"
          :key="index"
          class="d-flex message message-user right left"
          :style="{display:  item.message.length > 0 ? 'block':'none'}"
        >
          <div class="message-body">
            <div class="d-flex align-items-center justify-content-end">
              <div class="mx-10 p-2">
                <a href="#" class="text-dark hover-primary font-weight-bold"
                  >讯飞星火</a
                >
              </div>
              <span class="msg-avatar">
                <img
                  class="avatar1"
                  src="https://xinghuo.xfyun.cn/static/media/gpt-logo.e9ad4150a385435f5a90b50c44dad847.svg"
                  alt=""
                />
              </span>
            </div>
            <span class="date-time text-muted">{{formatCurrentTime()}}</span>
            <div class="message-row message-row-con">

            
              <div
                id="message-user-chat-question-1"
                class="message-content p-3 text-chat"
              
              >
               <VueMarkdown   :source="item.message"> </VueMarkdown>

               <p  @click="stopAnswer" :style="{visibility: item.tips ? 'visible':'hidden'  }" class="answers">停止回答</p>
            </div>
           
            </div>
          </div>
        </li>
      </template>
    </ul>

    <el-card class="chat-footer">
      <div class="inp">
        <input
          v-model="message"
          placeholder="请输入内容"
          type="text"
          @keyup.enter="send"
        />
        <button :disabled="disabled" @click="send">
          {{ disabled ? "回答中..." : "发送" }}
        </button>
      </div>
    </el-card>
  </el-card>
</client-only>
</template>

<script>
import axios from "axios";

import chat from "./chat.js";

export default {
  // 抽离业务逻辑
  mixins: [chat],

  data() {
    return {
      message: "",
      // 看一句话是否回复完
      contentFlag: false,

      // 记录历史对话信息
      text: [],

      list: [
        {
          left: false,
          message: "可以聊天了~",
        },
      ],
      disabled: false,
      // 聊天框的宽度
      width: "calc(100vw -220px )",
    };
  },
  methods: {
    async send() {

      if(this.disabled) return

      if (this.message.trim().length <= 0) return;
      this.disabled = true;
      this.list.push({
        left: false,
        message: this.message,
      });

       this.list.push({ left: true, message: '', tips: true});

      // this.scrollToBottom();
      // const { data } = await axios({
      //   url: "http://ajax-api.itheima.net/api/robot",
      //   params: {
      //     spoken: this.message,
      //   },
      // });

      // console.log(data);

      // this.list.push({
      //   left: true,
      //   message: data.data.info.text,
      // });
      // this.message = "";
      // this.disabled = false;
      this.text.push(
        {
          role: "user",
          content: this.message,
        },
      );
      this.bigModel.start(this.message);
      this.scrollToBottom();
      this.message = ''
    },
    btnIsDisabled(){
          this.disabled = false;

         
          this.list[this.list.length -1].tips = false 

    },

    scrollToBottom() {
      this.$nextTick(() => {
        const chat = this.$el.querySelector("#chat-message");
        console.log(chat.scrollHeight);
        chat.scrollTop = chat.scrollHeight;
        window.scroll(0, chat.scrollHeight + 50);
      });
    },
    //  计算chat-box的宽度
    getBoxWidth() {
      let w = this.$refs.box.$el.offsetWidth;
      console.log(w);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getBoxWidth();
    });
  },
};
</script>

<style scoped  >
li {
  list-style: none;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.message.right {
  text-align: right;
}

.chat-content .message + .message {
  margin-top: 10px;
}

.avatar1,
.avatar {
  width: 60px;
  border-radius: 50% !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.message .avatar {
  border: 2px solid #21aa93;
  border-radius: 50% !important;
}

.text-muted {
  color: #95aac9;
}

.message.right .message-content {
  background-color: #f5f5f5;
  text-align: left;
  border-radius: 15px 0 15px 15px;
}

.message .message-content {
  max-width: 60%;
  min-width: 10%;
  border-radius: 0 15px 15px 15px;
  font-size: 16px;
  line-height: 1.6;
}

.right .message-row-con {
  display: flex;
  justify-content: flex-end;
}

.right .message-content {
  padding: 10px;
  margin-top: 5px;
}

.d-flex {
  margin-top: 20px;
}

.message.right.left {
  text-align: left;
}

.message.right.left .message-row {
  justify-content: flex-start;
}

.message.left .message-content[data-v-73c72fc6] {
  background-color: #f5f5f5;
  text-align: left;
  border-radius: 0 15px 15px 15px;
}

.chat-box {
  position: relative;
  padding-bottom: 50px;
}
.chat-footer {
  background-color: #fff !important;
  padding: 0 20px;
  position: absolute;
  box-sizing: border-box;
  width: 1160px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  background-color: var(--body-color);
  padding-top: 0.5rem !important;

  border-top: 1px solid #dee2e6;
 

  z-index: 100;

}
.inp {
  display: flex;
}
.chat-footer input {
  flex: 1;
  border: none;
  outline: none;
  height: 40px;
}

.chat-footer button {
  background-color: #21aa93;
  border-color: #21aa93;
  color: #fff;
  width: 90px;
  height: 40px;
  border: 0;
  outline: none;
  cursor: pointer;
}

.list-unstyled {
  margin-bottom: 50px;
}

.chat-box {
  margin: 20px;
  width: 1160px;
  margin: 15px auto;
}
.answers {
    transform: scale(0.9);
    font-size: 12px;
    background: #f5f5f5;
    width: 61px;
    padding: 2px 5px;
    text-align: center;
    border-radius: 26px 0;
    cursor: pointer;
    
}

</style>


<style>


.chat-box .el-card__body {
  flex: 1;
}

</style>